<template>
  <div class="strategy-detail-page">
    <div class="post-container" v-if="strategyDetail">
      <div class="content-wrapper">
        <!-- 图片+文案主内容区 -->
        <div class="main-content">
          <!-- 左侧图片部分 -->
          <div class="left-side">
            <div class="post-images" v-if="strategyDetail.images?.length">
              <div class="image-carousel">
                <!-- 返回箭头 -->
                <button class="back-btn" @click="goBack">
                  <el-icon>
                    <Back />
                  </el-icon>
                </button>

                <!-- 左右切换按钮 -->
                <button class="carousel-btn prev-btn" @click="prevImage" v-if="strategyDetail.images.length > 1">
                  <el-icon>
                    <ArrowLeftBold />
                  </el-icon>
                </button>
                <button class="carousel-btn next-btn" @click="nextImage" v-if="strategyDetail.images.length > 1">
                  <el-icon>
                    <ArrowRightBold />
                  </el-icon>
                </button>

                <!-- 图片容器 -->
                <div class="image-container">
                  <img v-for="(img, idx) in strategyDetail.images" :key="idx" :src="img" class="post-img" alt="攻略图片"
                    @error="handleImageError" :class="{ active: currentImageIndex === idx }" />
                </div>

                <!-- 页码显示 -->
                <div class="image-counter">
                  {{ currentImageIndex + 1 }}/{{ strategyDetail.images.length }}
                </div>

                <!-- 指示器小点 -->
                <div class="carousel-indicators" v-if="strategyDetail.images.length > 1">
                  <span v-for="(img, idx) in strategyDetail.images" :key="idx"
                    :class="{ active: currentImageIndex === idx }" @click="currentImageIndex = idx"></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧文案部分 -->
          <div class="right-side">
            <!-- 发布内容卡片 -->
            <div class="post-card">
              <div class="post-header">
                <img class="post-avatar" :src="strategyDetail.userAvatar || defaultAvatar" alt="用户头像"
                  @error="handleImageError" @click="goToUserProfile(strategyDetail.userId)" style="cursor:pointer;" />
                <div class="post-user-info">
                  <span class="post-nickname">{{ strategyDetail.userName }}</span>
                  <span class="post-time-region">
                    <i class="far fa-calendar-alt"></i>
                    {{ formatDate(strategyDetail.modificationTime) }}
                  </span>
                </div>
                <button class="follow-btn" :class="{ followed: isFollowing }" @click="toggleFollow">
                  <i :class="isFollowing ? 'fas fa-check' : 'fas fa-plus'"></i>
                  {{ isFollowing ? '已关注' : '关注' }}
                </button>
              </div>

              <div class="post-title">攻略名称：{{ strategyDetail.strategyName }}</div>

              <!-- 小红书风格景点tag -->
              <div class="scenic-spot-tags" v-if="strategyDetail.scenicSpotName">
                <span class="scenic-tag">#{{ strategyDetail.scenicSpotName }}</span>
              </div>

              <div class="post-content">
                <span v-html="strategyDetail.strategyContent"></span>
                <div class="tags" v-if="strategyDetail.tags?.length">
                  <span class="tag" v-for="(tag, idx) in strategyDetail.tags" :key="idx">#{{ tag }}</span>
                </div>
              </div>

              <!-- 操作按钮回归文案下方 -->
              <div class="post-actions">
                <div class="action-item" @click="toggleLike">
                  <span :class="{ 'is-active': isLiked }">❤️{{ isLiked ? '已点赞' : '点赞' }}</span>
                  <span class="count">{{ strategyDetail.likeCount }}</span>
                </div>

                <!-- 修改收藏按钮绑定 -->
                <div class="action-item" @click="handleCollect">
                  <span :class="{ 'is-active': isCollected }">⭐{{ isCollected ? '已收藏' : '收藏' }}</span>
                  <span class="count">{{ strategyDetail.collectCount }}</span>
                </div>
                <div class="action-item">
                  <span>🗨️评论</span>
                  <span class="count">{{ commentCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 评论区移至整体内容下方 -->
        <div class="comment-section">
          <div class="section-title">
            <i class="fas fa-comments"></i>
            用户评论 ({{ commentCount }})
          </div>
          <div class="comment-container">
            <div class="comment-list" ref="commentList">
              <div class="comment-card" v-for="comment in comments" :key="comment.strategyCommentId">
                <div class="comment-header">
                  <img class="comment-avatar" :src="comment.userAvatar || defaultAvatar" alt="评论者头像"
                    @error="handleImageError" />
                  <div class="comment-user-info">
                    <span class="comment-username">{{ comment.userName }}</span>
                    <span class="comment-time">
                      <i class="far fa-clock"></i>
                      {{ formatDate(comment.commentTime) }}
                      <i class="fas fa-map-marker-alt"></i>
                      {{ comment.region }}
                    </span>
                  </div>
                </div>
                <div class="comment-content">{{ comment.commentContent }}</div>
              </div>
            </div>
            <div class="comment-form">
              <textarea v-model="newComment" placeholder="写下你的评论..." class="comment-input"
                :disabled="!currentUserId || commentLoading" @input="adjustTextareaHeight"></textarea>
              <button class="comment-submit-btn" :disabled="!newComment.trim() || !currentUserId || commentLoading"
                @click="submitCommentInDialog">发布</button>
              <div v-if="!currentUserId" class="login-tip">
                请<a href="/login">登录</a>后发表评论
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="loading">
      <i class="fas fa-spinner"></i>
      <div>攻略加载中...</div>
    </div>
  </div>
</template>
<script>
import { ArrowLeftBold, ArrowRightBold, Back } from '@element-plus/icons-vue'
import { ElIcon, ElNotification } from 'element-plus'
import axios from 'axios'

export default {
  components: {
    ArrowLeftBold,
    ArrowRightBold,
    Back
  },
  data() {
    return {
      strategyDetail: null,
      comments: [],
      defaultAvatar: '',
      currentImageIndex: 0,
      autoPlayInterval: null,
      strategyId: this.$route.params.id, // 获取路由中的攻略ID
      isLiked: false, // 点赞状态
      isCollected: false,
      isFollowing: false, // 关注状态
      currentUserId: null,// 当前用户ID
      commentLoading: false,
      newComment: '', // 新评论内容
      commentCount: 0, // 评论总数
      // 新增：景点列表数据
      scenicSpots: []
    }
  },
  async created() {
    await this.fetchCurrentUserId();

    await this.loadScenicSpots(); // 加载景点列表

    await this.fetchStrategyDetail();
    await this.fetchComments(); // 确保初始只查当前攻略评论
    this.startAutoPlay();
  },
  methods: {
    // 新增：加载景点列表
    async loadScenicSpots() {
      try {
        const response = await axios.get('http://localhost:8080/mw/ScenicSpotList')
        this.scenicSpots = response.data || []
      } catch (error) {
        console.error('加载景点列表失败:', error)
      }
    },

    // 新增：根据景点ID获取景点名称
    getScenicSpotName(scenicSpotId) {
      if (!scenicSpotId || !this.scenicSpots.length) return null;
      const spot = this.scenicSpots.find(s => s.scenicSpotId === scenicSpotId);
      return spot ? spot.scenicAreaName : null;
    },



    goToUserProfile(userId) {
      if (userId) {
        this.$router.push(`/user/profile/${userId}`)
      }
    },
    // 获取当前用户ID
    async fetchCurrentUserId() {
      const loginId = localStorage.getItem('loginId');
      if (loginId) {
        try {
          const userRes = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${loginId}`);
          this.currentUserId = userRes.data.userId;
        } catch (error) {
          console.error('获取用户ID失败:', error);
        }
      }
    },

    // 获取攻略详情（包含状态判断）
    async fetchStrategyDetail() {
      try {
        // 检查用户是否登录
        const params = this.currentUserId ? { userId: this.currentUserId } : {};

        const response = await axios.get(
          `http://localhost:8080/ts/detail/${this.strategyId}`,
          { params }
        );

        const detail = response.data.detail;

        // 获取景点名称
        const scenicSpotName = this.getScenicSpotName(detail.scenicSpotId);


        this.strategyDetail = {
          ...detail,
          images: response.data.images.map(img => img.strategyImageLink),
          likeCount: this.safeNumber(detail.likeCount),
          collectCount: this.safeNumber(detail.collectCount),
          //commentCount: this.safeNumber(detail.commentCount),
          userName: detail.userName,
          userAvatar: detail.userAvatar,
          userId: detail.userId,

          // 新增：景点名称
          scenicSpotName: scenicSpotName

        };

        // 检查关注状态
        if (this.currentUserId && detail.userId) {
          const followRes = await axios.get('http://localhost:8080/mw/checkFollow', {
            params: {
              userId: this.currentUserId,
              followedUserId: detail.userId
            }
          });
          this.isFollowing = followRes.data;
        }

        // 检查点赞状态
        if (this.currentUserId) {
          const likeRes = await axios.get('http://localhost:8080/strlike/checkLike', {
            params: {
              userId: this.currentUserId,
              strategyId: this.strategyId
            }
          });
          this.isLiked = likeRes.data;
        }

        // 检查收藏状态
        if (this.currentUserId) {
          const collectRes = await axios.get('http://localhost:8080/strategyCollect/checkFavorite', {
            params: {
              userId: this.currentUserId,
              strategyId: this.strategyId
            }
          });
          this.isCollected = collectRes.data;
        }

      } catch (error) {
        console.error('获取攻略详情失败:', error);
        this.$notify({ title: '错误', message: '获取攻略详情失败', type: 'error' });
      }
    },
    formatDate(dateString) {
      if (!dateString) return ''
      try {
        const date = new Date(dateString)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      } catch {
        return dateString
      }
    },
    handleImageError(e) {
      e.target.src = this.defaultAvatar
    },
    safeNumber(value) {
      const num = Number(value);
      return isNaN(num) ? 0 : num;
    },

    // 关注功能
    // 攻略详情页面的关注功能优化
    // 在你的 Vue 组件的 methods 中替换原有的 toggleFollow 方法

    async toggleFollow() {
      if (!this.currentUserId) {
        ElNotification.warning('请先登录才能关注');
        return;
      }

      const authorId = this.strategyDetail.userId; // 攻略发布者ID

      // 防止用户关注自己
      if (this.currentUserId === authorId) {
        ElNotification.warning('不能关注自己哦');
        return;
      }

      try {
        if (this.isFollowing) {
          // 取消关注
          await axios.delete(`http://localhost:8080/mw/deleteByUserAndFollow`, {
            params: {
              userId: this.currentUserId,
              followedUserId: authorId
            }
          });
          ElNotification.success('已取消关注');
        } else {
          // 关注用户
          const followData = {
            userId: this.currentUserId,
            followedUserId: authorId,
            followedTime: new Date().toISOString()
          };

          const response = await axios.post(`http://localhost:8080/mw/addUserFollow`, followData);

          if (response.data > 0) {
            ElNotification.success('关注成功');

            // 可选：通知被关注用户（如果有通知系统）
            await this.notifyUserFollowed(authorId);
          } else {
            throw new Error('关注失败');
          }
        }

        this.isFollowing = !this.isFollowing; // 切换状态

      } catch (error) {
        console.error('关注操作失败:', error);
        ElNotification.error('操作失败，请稍后再试: ' + (error.response?.data?.message || error.message));
      }
    },

    // 可选：通知被关注用户的方法
    async notifyUserFollowed(followedUserId) {
      try {
        // 如果你有通知系统，可以在这里发送通知
        await axios.post(`http://localhost:8080/notification/follow`, {
          fromUserId: this.currentUserId,
          toUserId: followedUserId,
          type: 'follow',
          content: '关注了你',
          createdTime: new Date().toISOString()
        });
      } catch (error) {
        console.log('发送关注通知失败:', error);
        // 这里不需要给用户显示错误，因为关注已经成功了
      }
    },
    // 点赞功能
    async toggleLike() {
      if (!this.currentUserId) {
        ElNotification.warning('请先登录才能点赞');
        return;
      }

      try {
        if (this.isLiked) {
          // 取消点赞
          await axios.delete(`http://localhost:8080/strlike/deleteByUserAndStrategy`, {
            params: { userId: this.currentUserId, strategyId: this.strategyId }
          });
          this.strategyDetail.likeCount--; // 更新计数
        } else {
          // 点赞
          await axios.post(`http://localhost:8080/strlike/insert`, {
            userId: this.currentUserId,
            strategyId: this.strategyId,
            likeTime: new Date().toISOString()
          });
          this.strategyDetail.likeCount++; // 更新计数
        }
        this.isLiked = !this.isLiked; // 切换状态
      } catch (error) {
        ElNotification.error('操作失败，请稍后再试');
      }
    },

    // 收藏功能
    async handleCollect() {
      if (!this.currentUserId) {
        ElNotification.warning('请先登录才能收藏');
        return;
      }

      try {
        if (this.isCollected) {
          // 取消收藏
          await axios.delete(`http://localhost:8080/strategyCollect/deleteByUserAndStrategy`, {
            params: { userId: this.currentUserId, strategyId: this.strategyId }
          });
          this.strategyDetail.collectCount--; // 更新计数
        } else {
          // 收藏
          await axios.post(`http://localhost:8080/strategyCollect/insert`, {
            userId: this.currentUserId,
            strategyId: this.strategyId,
            favoriteTime: new Date().toISOString()
          });
          this.strategyDetail.collectCount++; // 更新计数
        }
        this.isCollected = !this.isCollected; // 切换状态
      } catch (error) {
        ElNotification.error('操作失败，请稍后再试');
      }
    },
    // 提交评论
    async submitCommentInDialog() {
      if (!this.currentUserId || !this.newComment.trim()) return;
      this.commentLoading = true;
      try {
        const commentData = {
          scenicSpotId: this.strategyDetail.scenicSpotId,
          strategyId: this.strategyId, // 确保添加了攻略ID
          userId: this.currentUserId,
          commentContent: this.newComment,
          commentTime: new Date().toISOString()
        };
        const response = await axios.post(
          'http://localhost:8080/sct/insert',
          commentData
        );
        if (response.data > 0) {
          ElNotification.success('评论发布成功');
          this.newComment = '';
          await this.fetchComments(); // 更新评论列表和数量
          this.commentDialogVisible = false;
        } else {
          throw new Error('评论发布失败');
        }
      } catch (error) {
        console.error('发布评论失败:', error);
        ElNotification.error('评论发布失败: ' + (error.response?.data?.message || error.message));
      } finally {
        this.commentLoading = false;
      }
    },
    // 获取评论列表
    async fetchComments() {
      try {
        const response = await axios.get(`http://localhost:8080/sct/pageByStrategy`, {
          params: {
            strategyId: this.strategyId, // 当前攻略的ID
            pageNum: 1,
            pageSize: 100 // 一次获取100条评论
          }
        });
        this.comments = response.data.list;
        this.commentCount = response.data.total; // 使用接口返回的总数
      } catch (error) {
        console.error('获取评论失败:', error);
      }
    },

    goBack() {
      this.$router.push('/homepage/strategy') // 需要配合Vue Router使用
    },
    prevImage() {
      this.currentImageIndex = this.currentImageIndex === 0
        ? this.strategyDetail.images.length - 1
        : this.currentImageIndex - 1;
      this.resetAutoPlay();
    },

    nextImage() {
      this.currentImageIndex = this.currentImageIndex === this.strategyDetail.images.length - 1
        ? 0
        : this.currentImageIndex + 1;
      this.resetAutoPlay();
    },

    startAutoPlay() {
      if (this.strategyDetail?.images?.length > 1) {
        this.autoPlayInterval = setInterval(() => {
          this.nextImage();
        }, 5000); // 5秒自动切换
      }
    },

    resetAutoPlay() {
      clearInterval(this.autoPlayInterval);
      this.startAutoPlay();
    },
  },
  beforeUnmount() {
    clearInterval(this.autoPlayInterval);
  }
}
</script>

<style scoped>
.strategy-detail-page {
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.strategy-detail-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 91, 149, 0.8)),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  z-index: 0;
  pointer-events: none;
}

.strategy-detail-page>* {
  position: relative;
  z-index: 1;
}

/* 新增：景点信息样式 */
.scenic-spot-info {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 10px;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
  border-left: 4px solid #409eff;
  border-radius: 6px;
  font-size: 14px;
}


body {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f8f9fa;
  color: #333;
  line-height: 1.6;
  padding-top: 80px;
  /* 防止内容被header遮挡 */
}

.left-side .image-carousel,
.right-side .post-card {
  height: 500px;
  /* 基础高度 */
}

/* 攻略详情容器 */
.post-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 80px;
  position: relative;
  background: transparent;
}

/* 内容区布局 */
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.main-content {
  margin-top: 40px;
  display: flex;
  gap: 30px;
}

.left-side,
.right-side {
  flex: 1;
  min-width: 0;
}

.left-side {
  flex: 1;
  min-width: 48%;
  align-self: flex-start;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  background: none !important;
  position: relative;
}

.right-side {
  flex: 1;
  min-width: 48%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 图片轮播相关 */
.image-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: 500px;
}

@media (max-width: 900px) {
  .image-carousel {
    height: 350px;
  }
}

@media (max-width: 600px) {
  .image-carousel {
    height: 300px;
  }
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.post-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  transform: scale(0.95);
  z-index: 1;
}

.post-img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.post-img:hover {
  transform: translateY(-5px);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) scale(1.05);
}

.prev-btn {
  left: 15px;
}

.next-btn {
  right: 15px;
}

.back-btn {
  position: absolute;
  top: 20px;
  left: 15px;
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
}

.image-counter {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 10;
  backdrop-filter: blur(4px);
  min-width: 55px;
  text-align: center;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-indicators span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-indicators span.active {
  background: white;
  transform: scale(1.2);
}

/* 发布内容卡片 */
.post-card {
  background: rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: sticky;
  top: 80px;
  z-index: 2;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 25px;
  overflow: hidden;
  /* 防止内容溢出 */
}

.post-header {
  flex-shrink: 0;
  /* 固定头部不收缩 */
  margin-bottom: 15px;
}

.post-title {
  flex-shrink: 0;
  /* 固定标题不收缩 */
  margin: 10px 0;
  font-size: 20px;
}

.post-content {
  flex: 1;
  /* 占据剩余空间 */
  overflow-y: auto;
  /* 内容滚动 */
  margin-bottom: 15px;
  padding-right: 10px;
  /* 为滚动条留出空间 */
}

.post-actions {
  flex-shrink: 0;
  /* 固定操作栏不收缩 */
  margin-top: 15px;
  padding: 15px 0;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.post-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.post-user-info {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  flex: 1;
}

.post-nickname {
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.post-time-region {
  font-size: 13px;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
  margin-top: 4px;
  display: flex;
  align-items: center;
}

.post-time-region i {
  margin-right: 5px;
  font-size: 12px;
}

.follow-btn {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(249, 162, 166, 0.3);
  display: flex;
  align-items: center;
}

.follow-btn i {
  margin-right: 5px;
}

.follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(249, 162, 166, 0.4);
}

.follow-btn.followed {
  background: linear-gradient(to right, #a1c4fd, #c2e9fb);
  box-shadow: 0 4px 10px rgba(161, 196, 253, 0.3);
}

.post-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  margin: 15px 0;
  line-height: 1.4;
}

.post-content {
  font-size: 16px;
  color: #f3f3f3 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
  line-height: 1.7;
  margin-bottom: 20px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.tag {
  background: linear-gradient(to right, #fbc2eb, #a6c1ee);
  color: white;
  font-size: 14px;
  padding: 6px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

/* 操作按钮 */
.post-actions {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 25px;
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: none !important;
}

.action-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  font-size: 15px;
  align-items: center;
  cursor: pointer;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
  transition: color 0.3s;
  padding: 8px 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: rgba(249, 162, 166, 0.1);
  color: #ff3b5a !important;
  transform: translateY(-3px);
}

.action-item:nth-child(2):hover {
  color: #ff835a !important;
}

.action-item:nth-child(3):hover {
  color: #4a9eff !important;
}

.action-item .count {
  font-weight: 600;
}

/* 评论区域 */
.comment-section {
  background: rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 25px;
  transition: transform 0.3s ease;
  max-height: unset;
}

.comment-section:hover {
  transform: translateY(-3px);
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  color: #4a9eff;
}

.comment-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.comment-list {
  max-height: 300px;
  /* 评论列表最大高度 */
  overflow-y: auto;
  /* 内容滚动 */
  padding-right: 10px;
  /* 为滚动条留出空间 */
  flex: 1;
  /* 评论列表占据剩余空间 */
}

/* 滚动条样式优化 */
.post-content::-webkit-scrollbar,
.comment-list::-webkit-scrollbar {
  width: 6px;
}

.post-content::-webkit-scrollbar-thumb,
.comment-list::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}

.post-content::-webkit-scrollbar-thumb:hover,
.comment-list::-webkit-scrollbar-thumb:hover {
  background: #bdbdbd;
}

.comment-card {
  padding: 18px 16px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.2s;
  background: rgba(255, 255, 255, 0.13) !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 12px;
}

.comment-card:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.comment-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.comment-user-info {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.comment-username {
  font-size: 15px;
  font-weight: 600;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.comment-time {
  font-size: 12px;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
  margin-top: 3px;
  display: flex;
  align-items: center;
}

.comment-time i {
  margin-right: 5px;
  font-size: 11px;
}

.comment-content {
  font-size: 15px;
  color: #f3f3f3 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
  line-height: 1.6;
  padding: 10px 0 5px 5px;
  margin: 5px 0;
  border-left: 3px solid #f0f0f0;
  padding-left: 15px;
  transition: border-color 0.3s;
}

.comment-card:hover .comment-content {
  border-left: 3px solid #a1c4fd;
}

/* 加载中 */
.loading {
  text-align: center;
  padding: 80px;
  font-size: 18px;
  color: #777;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading i {
  font-size: 36px;
  margin-bottom: 15px;
  color: #a1c4fd;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 900px) {
  .main-content {
    flex-direction: column;
  }

  .left-side,
  .right-side {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .post-actions {
    justify-content: space-around;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: none;
  }
}

/* 添加评论表单样式 */
/* 评论表单 */
.comment-form {
  background: rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  padding: 15px;
  box-shadow: none !important;
  border: none !important;
  margin-top: 15px;
}

/* 评论输入框 */
.comment-input {
  width: 100%;
  min-height: 36px;
  /* 初始高度为一行 */
  max-height: 100px;
  /* 最大高度限制 */
  padding: 8px 12px;
  border-radius: 6px;
  border: none !important;
  font-size: 14px;
  resize: none;
  /* 禁用手动调整大小 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  transition: border-color 0.3s;
  background: rgba(255, 255, 255, 0.13) !important;
  color: #fff !important;
}

.comment-input:focus {
  outline: none;
  border: 1.5px solid #a1c4fd !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

/* 自动调整文本框高度 */
.comment-input {
  overflow-y: hidden;
}

/* 发布按钮 */
.comment-submit-btn {
  display: block;
  margin: 10px auto 0;
  padding: 8px 20px;
  background: linear-gradient(to right, #4a9eff, #6b8eff);
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 3px 8px rgba(74, 158, 255, 0.3);
}

.comment-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(74, 158, 255, 0.4);
}

.comment-submit-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.login-tip {
  margin-top: 10px;
  text-align: right;
  color: #ff6b6b;
  font-size: 14px;
}

.login-tip a {
  color: #4a9eff;
  text-decoration: none;
  margin-left: 5px;
}

.login-tip a:hover {
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .comment-form {
    padding: 15px;
  }

  .comment-input {
    min-height: 80px;
  }
}

/* tag样式 */
.scenic-spot-tags {
  display: flex;
  gap: 10px;
  margin: 12px 0 18px 0;
  flex-wrap: wrap;
}

.scenic-tag {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  color: #fff;
  font-size: 15px;
  padding: 5px 16px;
  border-radius: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(161, 196, 253, 0.13);
  user-select: none;
  transition: background 0.2s;
}

.scenic-tag:hover {
  background: linear-gradient(135deg, #c2e9fb 0%, #a1c4fd 100%);
}
</style>